<!--
 * @Author: your name
 * @Date: 2021-01-04 11:07:07
 * @LastEditTime: 2021-01-04 13:58:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\fudong\wendangliu.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丢失空间</title>
    <style>
        /*
            如果只给第一个元素设置浮动,第二个元素不设置,后面的元素会占用第一个元素空间
            两个元素都设置浮动后,会并排显示
            为第二个元素设置右浮动的时候将浮动到右边
            浮动元素的边界不能超过父元素的padding
            元素浮动之后会变为块级元素
        */
        main{
            width: 400px;
            border: 2px solid black;
            overflow: auto;
            padding: 50px;
            background-color: antiquewhite;
            background-clip: content-box;
        }
        
        div{
            width: 150px;
            height: 150px;
        }
        div:first-of-type{
            border: solid 2px red;
            float: left;
        }
        div:last-of-type{
            background: green;
            float: right;
        }

        /*浮动的话会让行元素转化为块元素，浮动之后就可以给元素设置高度和宽度*/
        a{
            border: 1px solid #dddddd;
            width: 200px;
            float: left;
        }
    </style>
    <script>
        
    </script>
</head>
<body>
    <main>
        <div></div>
        <div></div>
       
    </main>
    <hr>
    <a href="#">javascript</a>
    
</body>
</html>